<template>
  <div class="filter-input" :class="config.filter.type" :style="{ width: config.filter.inputWidth }">
    <template v-if="config.filter.type === 'select'">
      <dict-select v-model="filterValue"
                   :dict-key="config.filter.dictKey || config.dictKey"
                   style="width: 100%"
                   @change="setValue"></dict-select>
    </template>
    <template v-else-if="config.filter.type === 'date-picker'">
      <el-date-picker
          v-model="filterValue"
          :type="config.filter.pickerType"
          :clearable="false"
          :disabled="!!config.filter.disabled"
          style="width: 100%"
          value-format="yyyy-M-d"
          range-separator="~"
          placeholder="选择日期"
          start-placeholder="起始日期"
          end-placeholder="终止日期"
          @change="setValue"></el-date-picker>
    </template>
    <template v-else>
      <el-input v-model="filterValue"
                :type="config.filter.type"
                :placeholder="config.filter.placeholder"
                :disabled="!!config.filter.disabled"
                style="width: 100%"
                @change="setValue"></el-input>
    </template>
  </div>
</template>

<script>
import DictSelect from '@/components/DictSelect'
export default {
  name: "FilterInput",
  components: { DictSelect },
  props: {
    value: {
      type: [String, Number, Boolean, Array],
      default: ''
    },
    //列数据，需要读取数据字典类型及filter本身参数
    config: {
      type: Object,
      required: true
    },
    //对应ajax参数，进返回数据时使用
    prop: {
      type: String,
      default: ''
    }
  },
  created(){
  },
  data(){
    return {
    }
  },
  computed:{
    filterValue:{
      get(){
        return this.value;
      },
      set(val){
        this.$emit('input', val)
      }
    }
  },
  watch:{
  },
  methods: {
    setValue(val){
      let v = this.config.filter.encode? encodeURIComponent(val): val;
      this.$emit('change', {key: this.config.filter.prop || this.prop, val: v});
    }
  }
}
</script>

<style scoped lang="scss">
  .filter-input{
    display: inline-block;
    flex: 1;
  }
</style>
<style lang="scss" scoped>
  .filter-input{
    .el-date-editor.el-range-editor{
        .el-range__icon, .el-range__close-icon{
          display: none;
        }
        .el-range-separator{
          width: 8%;
          padding: 0 3px;
        }
        .el-range-input{
          width: 46%
        }
    }
  }
</style>
